<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.main{
				width: 100%;
				padding: 0.5em;
				position: relative;
			}
			.content{
				width: 100%;
				background-color: white;
				padding: 0.5em;
			}
			.content>div{
				padding: 0.2em 0;
			}
			.margin050{
				margin: 0.5em 0;
			}
			.butdiv{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 11px;
			}
			.butdiv>div{
				width: 40%;
			}
			*{
				font-size: 0.95em;
			}
			
			
			.tuidandiv{
				position: absolute;
				width: 30%;
				right: 0;
				top: -10px;
				overflow: hidden;
				transform:rotate(-20deg);
			}
			.tuidandiv>img{
				width: 100%;
			}
			
			.mui-input-row>label{
				width: 65%;
			}
			.mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea {
			    float: right;
			    width: 35%;
			    margin-bottom: 0;
			    padding-left: 0;
			    border: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">单据明细</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-row">
			    <label>打印份数</label>
			    <input type="number" id="count" class="textc" placeholder="请输入份数" value="1">
			</div>
			<div class="mui-input-row">
			    <label>是否打印提成员工</label>
			    <div class="mui-switch mui-switch-blue" id="is_percent">
			        <div class="mui-switch-handle"></div>
			    </div>
			</div>
			
		    <div class="main" id="mainid">
		    	<div class="content border-b">
		    		<div class="flex-row-between">
		    			<span id="">
		    				单据号
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		<div class="flex-row-between ">
		    			<span id="">
		    				业务类型
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		
		    	</div>
		    	<div class="content border-b">
		    		<div class="flex-row-between">
		    			<span id="">
		    				操作工号
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		<div class="flex-row-between ">
		    			<span id="">
		    				操作门店
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		<div class="flex-row-between ">
		    			<span id="">
		    				操作时间
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		
		    	</div>
		    	<div class="content">
		    		<div class="flex-row-between">
		    			<span id="">
		    				备注
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    	</div>
		    	
		    	<div class="content margin050">
		    		<div class="flex-row-between">
		    			<span id="">
		    				订单原价
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		<div class="flex-row-between">
		    			<span id="">
		    				实付金额
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		
		    	</div>
		    	
		    	<div class="content margin050">
		    		<div class="flex-row-between ">
		    			<span id="">
		    				消费明细
		    			</span>
		    			<span id="">
		    				
		    			</span>
		    		</div>
		    		<div class="flex-row-between">
		    			<span id="">
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    		<div class="flex-row-between">
		    			<span id="">
		    			</span>
		    			<span id="">
		    			</span>
		    		</div>
		    	</div>
		    	
		    </div>
		    <div class="butdiv" id="pdivid">
		    	
		    	<div class="" id="outdiv">
		    		<button type="button" id="refund" class="mui-btn mui-btn-blue mui-btn-block">退单</button>
		    	</div>
                
		    	<div class="" >
		    		<button type="button" id="printbut" class="mui-btn mui-btn-blue mui-btn-block">打印</button>
		    	</div>
		    </div>
		    
		    
		    <div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view" id="plist">
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#forward"><b>取消</b></a>
					</li>
				</ul>
			</div> 
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var id = 0, 	//订单id
			type = "",		//订单类型	
			pid = 0,		//打印机id
			order_number = '';	//订单号
			window.onload = function(){
				var list = getrequest();
				console.log(list);
				id = list.id;
				type = list.type;
				if(type == 'consume'){
					$("#outdiv").addClass("hidden");
				}
				//点击打印，先获取打印机列表
				g("printbut").addEventListener("tap",function(e){
					var data = {
						url:"/api/printer/lst",
						data:{access_token:acctoken()}
					}
					ajax(data,function(res){
						console.log(res);
						setprinter(res.data);
					})
					
				})
				//监听退单
				g("refund").addEventListener("tap",function(res){
					mui.confirm("是否确认退单？","",["取消","确认"],function(e){
						if(e.index == 1){
							var data = {
								data:{
									access_token:acctoken(),
									order_number:order_number,
									//record_id:id
								}
							}
							console.log(type === 'recharge')
							if(type === 'recharge'){
								data.url = "/api/recharge/refund";
							}else{
								data.url = "/api/order/refund";
							}
							ajax(data,function(res){
								console.log(res);
								mui.toast(res.msg);
								getbillsdetail();
							})
							
						}
						
					})
					
				})
				//监听打印机 列表
				mui('#forward').on('tap', '.mui-popover-action li>a', function() {
						var a = this;
						pid =  $(this).attr("data-id")||0;
						if(pid && pid > 0){
							
							wp_print();
						}
						mui('#forward').popover('toggle');
				})
				
				
				getbillsdetail();
			}
			
			//设置打印机列表
			function setprinter(list){
				var str = ''
						list.forEach(function(item,index){
							str += '<li class="mui-table-view-cell" >'+
								'<a href="#" data-id="'+item.id+'">'+
								item.printer_name+
								'</a></li>';
						})
				g("plist").innerHTML = str;
				mui('#forward').popover('toggle',g("popover"));
			}
			//开始打印
			function wp_print(){
				var is_percent = g("is_percent").classList.contains("mui-active");
				var data = {
						url:"/api/printer/wp_print",
						data:{
							access_token:acctoken(),
							printer_id:pid,
							order_type:type,
							order_id:id,
							is_percent:is_percent?1:2,
							count:g("count").value||1
						}
					}
				ajax(data,function(res){
					console.log(res);
					mui.toast(res.msg);
				})
			}
			
			//获取单据详情
			function getbillsdetail(){
				var data = {
					url:"/api/bills/detail",
					data:{
						access_token:acctoken(),
						type:type,
						id:id||9999
					}
				}
				ajax(data,function(res){
					console.log("订单详情",res);
					
					//setbillsdetail(res.data)
					//setproduct(res.data);
					if(res.data != null){
						order_number = res.data.order_number;
						if(type == 'recharge'){
							setrecharge(res.data);
						}
						if(type == 'product'){
							setbillsdetail(res.data);
						}
						if(type == 'consume'){
							setconsume(res.data);
						}
					}else{
						mui.toast("订单未找到");
						setTimeout(function(){
							mui.back()
						},1000)
					}
					
				})
				
			}
			
			//设置次卡扣减
			function setconsume(list){
				var str = '';
				if(list.order_status == "已退单"){
						str += '<div class="tuidandiv">'+
							    '<img src="../../img/tuidan.png"/>'+
							    '</div>';
				}
				str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">单据号</span><span id="">'+list.order_number+'</span>'+
		    		'</div><div class="flex-row-between "><span id="">业务类型</span>';
		    		if(type == 'recharge'){
		    			str += '<span id="">充值</span>';
		    		}else if(type == 'consume'){
		    			str += '<span id="">次卡扣减</span>';
		    		}else{
		    			str += '<span id="">收银记账</span>';
		    		}
		    		str += '</div></div>'+
		    		
		    		'<div class="content border-b"><div class="flex-row-between">';
		    		if(list.order_member_msg){
		    			str += 
		    			'<span id="">会员姓名</span><span id="">'+
		    				list.order_member_msg.username+
		    			'</span></div>'+
		    			'<div class="flex-row-between "><span id="">'+
		    			'会员卡号</span><span id="">'+list.order_member_msg.card_number+'</span></div>';
		    		}else{
		    			str += '<span id="">会员姓名</span><span id="">散客</span></div>';
		    		}
		    		if(list.pay_sort){
		    			str += '<div class="flex-row-between "><span id="">'+
		    			'支付方式</span><span id="">'+list.pay_sort.name+'</span></div>';
		    		}
		    		if(list.give_money){
		    			str += '<div class="flex-row-between "><span id="">'+
		    			'赠送金额</span><span id="">'+list.give_money+
		    			'</span></div>';
		    		}
		    		str += '</div>';
		    		if(list.order_consume_card_percent&&list.order_consume_card_percent.length){
		    			str += '<div class="content border-b">';
		    			list.order_consume_card_percent.forEach(function(item,index){
		    				if(item.employee&&item.employee.username){
		    					str += '<div class="flex-row-between">';
		    					str += '<span id="">提成员工:'+item.employee.username+'</span><span id="">'+
			    				'提成金额:'+item.percent_money+
			    				'</span></div>';
		    				}
		    			})
		    			str +='</div>';
		    		}
		    		
		    		
		    		
		    		str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">操作工号</span><span id="">'+
		    		list.employee.job_number+
		    		'</span></div><div class="flex-row-between "><span id="">'+
		    		'操作门店</span><span id="">'+list.store.store_name+'</span></div>'+
		    		'<div class="flex-row-between "><span id="">操作时间</span>'+
		    		'<span id="">'+list.createtime+'</span></div></div>'+
		    		'<div class="content"><div class="flex-row-between">'+
		    		'<span id="">备注</span><span id="">'+list.remark+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between">'+
		    		'<span id="">订单原价</span><span id="">￥'+
		    		list.order_money+
		    		'</span></div>'+
		    		'<div class="flex-row-between"><span id="">实付金额</span>'+
		    		'<span id="">￥'+list.pay_money+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between ">'+
		    		'<span id="">消费明细</span><span id=""></span></div>';
		    		
		    		if(list.order_consume_card_detail.length){
		    			list.order_consume_card_detail.forEach(function(item,index){
		    				str += '<div class="flex-row-between">'+
			    			'<span id="">'+item.card_name+'</span><span id=""></span></div>'+
			    			'<div class="flex-row-between"><span id="">'+
			    			'￥'+item.card_money+' x '+item.count+'</span>'+
			    			'<span id="">￥'+(item.card_money*item.count).toFixed(2)+'</span></div>';
		    				
		    			})
		    		}
					
		    		str += '</div>';
				
				g("mainid").innerHTML = str;
			}
			
			//设置会员充值
			function setrecharge(list){
				var str = '';
				if(list.order_status == "已退单"){
						str += '<div class="tuidandiv">'+
							    '<img src="../../img/tuidan.png"/>'+
							    '</div>';
				}
				str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">单据号</span><span id="">'+list.order_number+'</span>'+
		    		'</div><div class="flex-row-between "><span id="">业务类型</span>';
		    		if(type == 'recharge'){
		    			str += '<span id="">充值</span>';
		    		}else if(type == 'consume'){
		    			str += '<span id="">次卡扣减</span>';
		    		}else{
		    			str += '<span id="">收银记账</span>';
		    		}
		    		str += '</div></div>'+
		    		
		    		'<div class="content border-b"><div class="flex-row-between">';
		    		if(list.order_member_msg){
		    			str += 
		    			'<span id="">会员姓名</span><span id="">'+
		    				list.order_member_msg.username+
		    			'</span></div>'+
		    			'<div class="flex-row-between "><span id="">'+
		    			'会员卡号</span><span id="">'+list.order_member_msg.card_number+'</span></div>';
		    		}else{
		    			str += '<span id="">会员姓名</span><span id="">散客</span></div>';
		    		}
		    		if(list.pay_sort){
		    			str += '<div class="flex-row-between "><span id="">'+
		    			'支付方式</span><span id="">'+list.pay_sort.name+'</span></div>';
		    		}
		    		str += '<div class="flex-row-between "><span id="">'+
		    			'赠送金额</span><span id="">'+list.give_money+'</span></div></div>';
		    		if(list.order_recharge_percent&&list.order_recharge_percent.length){
		    			str += '<div class="content border-b">';
		    			list.order_recharge_percent.forEach(function(item,index){
		    				if(item.employee&&item.employee.username){
		    					str += '<div class="flex-row-between">';
		    					str += '<span id="">提成员工:'+item.employee.username+'</span><span id="">'+
			    				'提成金额:'+item.percent_money+
			    				'</span></div>';
		    				}
		    			})
		    			str +='</div>';
		    		}
		    		
		    		str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">操作工号</span><span id="">'+
		    		list.employee.job_number+
		    		'</span></div><div class="flex-row-between "><span id="">'+
		    		'操作门店</span><span id="">'+list.store.store_name+'</span></div>'+
		    		'<div class="flex-row-between "><span id="">操作时间</span>'+
		    		'<span id="">'+list.createtime+'</span></div></div>'+
		    		'<div class="content"><div class="flex-row-between">'+
		    		'<span id="">备注</span><span id="">'+list.remark+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between">'+
		    		'<span id="">订单原价</span><span id="">￥'+
		    		list.order_money+
		    		'</span></div>'+
		    		'<div class="flex-row-between"><span id="">实付金额</span>'+
		    		'<span id="">￥'+list.pay_money+'</span></div></div>';
		    		
				
				g("mainid").innerHTML = str;
			}
			
			
			//设置单据详情
			function setbillsdetail(list){
				var str = '';
				if(list.order_status == "已退单"){
						str += '<div class="tuidandiv">'+
							    '<img src="../../img/tuidan.png"/>'+
							    '</div>';
				}
				str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">单据号</span><span id="">'+list.order_number+'</span>'+
		    		'</div><div class="flex-row-between "><span id="">业务类型</span>';
		    		if(type == 'recharge'){
		    			str += '<span id="">充值</span>';
		    		}else if(type == 'consume'){
		    			str += '<span id="">次卡扣减</span>';
		    		}else{
		    			str += '<span id="">收银记账</span>';
		    		}
		    		str += '</div></div>'+
		    		
		    		'<div class="content border-b"><div class="flex-row-between">';
		    		if(list.order_member_msg){
		    			str += 
		    			'<span id="">会员姓名</span><span id="">'+
		    				list.order_member_msg.username+
		    			'</span></div>'+
		    			'<div class="flex-row-between "><span id="">'+
		    			'会员卡号</span><span id="">'+list.order_member_msg.card_number+'</span></div>';
		    		}else{
		    			str += '<span id="">会员姓名</span><span id="">散客</span></div>';
		    		}
		    		if(list.pay_sort){
		    			str += '<div class="flex-row-between "><span id="">'+
		    			'支付方式</span><span id="">'+list.pay_sort.name+'</span></div>';
		    		}
		    		str += '<div class="flex-row-between "><span id="">'+
		    			'优惠金额</span><span id="">'+list.reduce_money+'</span></div></div>';
		    		if(list.order_product_percent&&list.order_product_percent.length){
		    			str += '<div class="content border-b">';
		    			list.order_product_percent.forEach(function(item,index){
		    				if(item.employee&&item.employee.username){
		    					str += '<div class="flex-row-between">';
		    					str += '<span id="">提成员工:'+item.employee.username+'</span><span id="">'+
			    				'提成金额:'+item.percent_money+
			    				'</span></div>';
		    				}
		    			})
		    			str +='</div>';
		    		}
		    		
		    		str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">操作工号</span><span id="">'+
		    		list.employee.job_number+
		    		'</span></div><div class="flex-row-between "><span id="">'+
		    		'操作门店</span><span id="">'+list.store.store_name+'</span></div>'+
		    		'<div class="flex-row-between "><span id="">操作时间</span>'+
		    		'<span id="">'+list.createtime+'</span></div></div>'+
		    		'<div class="content"><div class="flex-row-between">'+
		    		'<span id="">备注</span><span id="">'+list.remark+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between">'+
		    		'<span id="">订单原价</span><span id="">￥'+
		    		list.order_money+
		    		'</span></div>';
		    		if(list.pay_id == 8){
		    			str += '<div class="flex-row-between"><span id="">余额扣款</span><span id="">￥'+
			    		list.use_balance+
			    		'</span></div>';
		    		}
		    		str += '<div class="flex-row-between"><span id="">实付金额</span>'+
		    		'<span id="">￥'+list.pay_money+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between ">'+
		    		'<span id="">消费明细</span><span id=""></span></div>';
		    		try {
						for(var i = 0; i < list.order_info.length; i++){
			    			str += '<div class="flex-row-between">'+
			    			'<span id="">'+list.order_info[i].product_name+'</span><span id=""></span></div>'+
			    			'<div class="flex-row-between"><span id="">'+
			    			'￥'+list.order_info[i].product_price+' x '+list.order_info[i].product_number+'</span>'+
			    			'<span id="">￥'+(list.order_info[i].product_price*list.order_info[i].product_number).toFixed(2)+'</span></div>';
			    		}
					} catch (e) {
					 console.log(e.name + ": " + e.message);
					}
		    		str += '</div>';
				
				g("mainid").innerHTML = str;
			}
			
			
			
			//设置收银记账详情
			function setproduct(list){
				var str = '';
				if(list.order_status == "已退单"){
						str += '<div class="tuidandiv">'+
							    '<img src="../../img/tuidan.png"/>'+
							    '</div>';
				}
				str += '<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">单据号</span><span id="">'+list.order_number+'</span>'+
		    		'</div><div class="flex-row-between "><span id="">业务类型</span>';
		    		if(type == 'recharge'){
		    			str += '<span id="">充值</span>';
		    		}else if(type == 'consume'){
		    			str += '<span id="">次卡扣减</span>';
		    		}else{
		    			str += '<span id="">收银记账</span>';
		    		}
		    		str += '</div></div>'+
		    		'<div class="content border-b"><div class="flex-row-between">'+
		    		'<span id="">操作工号</span><span id="">'+
		    		list.employee.job_number+
		    		'</span></div><div class="flex-row-between "><span id="">'+
		    		'操作门店</span><span id="">'+list.store.store_name+'</span></div>'+
		    		'<div class="flex-row-between "><span id="">操作时间</span>'+
		    		'<span id="">'+list.createtime+'</span></div></div>'+
		    		'<div class="content"><div class="flex-row-between">'+
		    		'<span id="">备注</span><span id="">'+list.remark+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between">'+
		    		'<span id="">订单原价</span><span id="">￥'+
		    		list.order_money+
		    		'</span></div>'+
		    		'<div class="flex-row-between"><span id="">实付金额</span>'+
		    		'<span id="">￥'+list.pay_money+'</span></div></div>'+
		    		'<div class="content margin050"><div class="flex-row-between ">'+
		    		'<span id="">消费明细</span><span id=""></span></div>';
		    		try {
						for(var i = 0; i < list.order_info.length; i++){
			    			str += '<div class="flex-row-between">'+
			    			'<span id="">'+list.order_info[i].product_name+'</span><span id=""></span></div>'+
			    			'<div class="flex-row-between"><span id="">'+
			    			'￥'+list.order_info[i].product_price+' x '+list.order_info[i].product_number+'</span>'+
			    			'<span id="">￥'+(list.order_info[i].product_price*list.order_info[i].product_number).toFixed(2)+'</span></div>';
			    		}
					} catch (e) {
					 console.log(e.name + ": " + e.message);
					}
		    		
		    		str += '</div>';
				
				g("mainid").innerHTML = str;
			}
			
			
			
		</script>
	</body>

</html>